<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        
        .lunbotu {
            width: 500px;
            height: 200px;
            overflow: hidden;
            margin: 100px auto;
            position: relative;
            box-shadow: 5px 5px 5px 5px gray;
        }
        
        .add li img {
            width: 500px;
            display: block;
            height: 200px;
        }
        
        .lt {
            position: absolute;
            font-size: 40px;
            top: 73px;
            left: 5px;
            color: gold;
            /* display: none; */
            cursor: pointer;
        }
        
        .lt:hover {
            background-color: rgb(73, 94, 106);
            opacity: 0.8;
        }
        
        .gt:hover {
            background-color: rgb(73, 94, 106);
            opacity: 0.8;
        }
        
        .gt {
            position: absolute;
            font-size: 40px;
            top: 73px;
            right: 5px;
            color: gold;
            /* display: none; */
            cursor: pointer;
        }
        /* .lunbotu .add:hover~.lt {
             opacity: 0.7; 
            display: block;
        }*/
        
        .lunbotu .yuandian {
            display: flex;
            position: absolute;
            top: 178px;
            left: 210px;
        }
        
        .lunbotu .yuandian li {
            width: 13px;
            margin-left: 5px;
            height: 13px;
            border-radius: 50%;
            border: 1px solid #000;
            opacity: 0.8;
            cursor: pointer;
            background-color: transparent;
        }
        
        .lunbotu .yuandian .active {
            background-color: #ff6700;
        }
        /*.lunbotu .add:hover~.gt {
            opacity: 0.7; 
            display: block;
        }*/
    </style>
</head>

<body>
    <div class="lunbotu">
        <ul class="add">
            <li><img src="img/01.jpg"></li>
            <li><img src="img/02.jpg"></li>
            <li><img src="img/03.jpg"></li>
            <li><img src="img/04.jpg"></li>
        </ul>
        <div class="lt">&lt;</div>
        <div class="gt">&gt;</div>
        <ul class="yuandian">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    let lt = document.querySelector(".lt")
    let gt = document.querySelector(".gt")
    let add = document.querySelectorAll("img")
    let yuan = document.querySelectorAll(".yuandian>li")
    let lastIndex = 0;

    yuan.forEach(function(item, index) {
        yuan.onclick = function() {
            yuan[lastIndex].classList.remove("active");
            item.classList.add("active");
            lastIndex = index;


            add.forEach(function(item, index) {
                if (index == lastIndex) {
                    add.innerText = item.innerText;
                }
            })

        }
    });
</script>

</html>